<template>
  <div id="dashboard">
    <div class="dashboard">
      <div class="sidebar-container">
        <div class="sidebar" :class="{ hidden: !menuVisible }">
          <div
            v-for="page in pages"
            :key="page.id"
            @click="selectPage(page)"
            :class="{ selected: page === selectedPage }"
          >
            <div class="sidebar-item">
              <i :class="page.icon"></i>
              <span v-show="menuVisible">{{ page.title }}</span>
            </div>
          </div>
          <div class="user-info">
            <div class="my sidebar-item">
              <i class="el-icon-user-solid"></i>
              <el-dropdown @command="handleCommand" trigger="click">
                <span class="el-dropdown-link"
                  >{{ username
                  }}<i class="el-icon-arrow-down el-icon--right"></i
                ></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="personalData"
                    >修改密码</el-dropdown-item
                  >
                  <el-dropdown-item command="settings">设置</el-dropdown-item>
                  <el-dropdown-item command="helpAndFeedback"
                    >帮助与反馈</el-dropdown-item
                  >
                  <el-dropdown-item command="adminPlatform"
                    >管理员操作平台</el-dropdown-item
                  >
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
        <div class="toggle-button" @click="toggleMenu">
          <i class="el-icon-s-operation"></i>
        </div>
      </div>
      <div class="details">
        <component
          :is="selectedPage ? selectedPage.component : 'div'"
        ></component>
      </div>
    </div>
  </div>
</template>

<script>
import FaceCompare from "../views/FaceCompare.vue";
import LiveDetection from "../views/LiveDetection.vue";
import FaceUpload from "../views/FaceUpload.vue";
import index from "../views/indexList.vue";
import FacialDetection from "../views/FacialDetection.vue";
import FacialRecognitionResults from "../views/FacialRecognitionResults.vue";
import PersonalData from "./ChangePassword.vue";
import Setting from "../views/Setting.vue";
import HelpAndFeedback from "../views/HelpAndFeedback.vue";
import AdminOperationPlatform from "../views/AdminOperationPlatform.vue";

export default {
  name: "DashboardList",
  data() {
    return {
      username: localStorage.getItem("username") || "未登录",
      menuVisible: true,
      pages: [
        { id: 1, title: "主页", icon: "el-icon-menu", component: index },
        {
          id: 2,
          title: "人脸比对",
          icon: "el-icon-s-data",
          component: FaceCompare,
        },
        {
          id: 3,
          title: "活体检测",
          icon: "el-icon-camera",
          component: LiveDetection,
        },
        {
          id: 4,
          title: "人脸上传",
          icon: "el-icon-upload",
          component: FaceUpload,
        },
        {
          id: 5,
          title: "人脸检测",
          icon: "el-icon-search",
          component: FacialDetection,
        },
        {
          id: 6,
          title: "人脸识别结果",
          icon: "el-icon-user-solid",
          component: FacialRecognitionResults,
        },
      ],
      selectedPage: {},
    };
  },
  created() {
    this.selectedPage = this.pages[0];
  },
  methods: {
     handleCommand(command) {
      switch (command) {
        case 'personalData':
          this.selectedPage = { title: "个人资料", icon: "el-icon-user", component: PersonalData };
          break;
        case 'settings':
          this.selectedPage = { title: "设置", icon: "el-icon-setting", component: Setting };
          break;
        case 'helpAndFeedback':
          this.selectedPage = { title: "帮助与反馈", icon: "el-icon-question", component: HelpAndFeedback };
          break;
        case 'adminPlatform':
          this.selectedPage = { title: "管理员操作平台", icon: "el-icon-s-custom", component: AdminOperationPlatform };
          break;
        case 'logout':
          this.logout();
          break;
        default:
          console.warn('Unknown command:', command);
      }
    },
    logout() {
      localStorage.removeItem("username");
      localStorage.removeItem("token");
      this.$router.push("/login");
    },
    selectPage(page) {
      this.selectedPage = page;
    },
    toggleMenu() {
      this.menuVisible = !this.menuVisible;
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#dashboard {
  width: 100%;
  height: 86vh;
}
.dashboard {
  display: flex;
  height: 86vh;
  width: 100%;
}

.sidebar-container {
  position: relative;
  display: flex;
  flex-direction: row;
}

.sidebar {
  color: #9da7b1;
  width: 200px;
  background: rgba(12, 26, 42, 0.5);
  box-sizing: border-box;
  height: 86vh;
  border-radius: 20px;
  position: relative;
}

.sidebar.hidden {
  width: 0; /* 隐藏菜单栏 */
}

.sidebar div {
  height: 60px;
  line-height: 60px;
  cursor: pointer;
  display: flex; /* 设置为flex布局 */
  align-items: center; /* 垂直居中 */
}

.sidebar div.selected {
  background-color: #6096a7;
  color: #ffffff;
  border-radius: 20px;
}

.sidebar i {
  margin-right: 10px;
}

.sidebar-item {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.sidebar-item span {
  margin-left: 5px; /* 文字与图标的间距 */
}

.details {
  flex: 1;
  overflow: auto;
}

.toggle-button {
  position: absolute;
  top: 40vh;
  right: -30px;
  width: 30px;
  height: 10%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.toggle-button i {
  color: #ffffff;
}
.user-info {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #ffffff;
}

.my {
  margin-bottom: 10px;
}

.user-info i {
  margin-right: 10px;
}

.user-info span {
  margin-left: 5px; /* 文字与图标的间距 */
}
</style>
